<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            margin: 10px;
            color: #336699;
        }

        .container {

            width: 1440px;
            height: auto;
            margin: 10px auto;
            text-align: center;
        }

        .catalog {
            margin: 0px auto;
            width: 60%;
            display: flex;
            text-align: center;
            border: 1px solid #FCFCFC;
            justify-content: space-around;
        }

        .catalog div {
            width: 110px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 5px;
            line-height: 40px;
            cursor: pointer;
        }

        /*
        .catalog div:first-child {
            background: lightskyblue;
        }*/

        .active {
            background: lightskyblue;
        }

        .items_list {
            width: 80%;
            margin: 20px auto;
            display: flex;
            justify-content: space-around;
            flex-flow: row wrap;
        }

        .items_list .item {
            width: 250px;
            height: 250px;
            cursor: pointer;
            padding: 10px 10px 30px 10px;
        }


        dl dd {
            text-align: left;
            padding-left: 5px;
            margin-top: 5px;
            padding-bottom: 5px;
            color: #666;
            font-size: x-small;
        }

        dl dt img:hover {
            transform: scale(1.01, 1.01);
            box-shadow: 0 5px 12px #e4e6e7;
            cursor: pointer;
        }

        .pager {
            width: 80%;
            margin: 10px auto;
            text-align: center;
            display: flex;
            justify-content: center;
        }

        .pager div {
            width: 20px;
            height: 20px;
            padding: 4px;
            margin: 5px;
            line-height: 20px;
            text-align: center;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #3399FF;
            color: #fff;
        }

        .footer-copyright {
            width: 80%;
            margin: 20px auto;
            text-align: center;
        }

        .footer-copyright hr {
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
<h1>SpringCloud商品查询接口案例</h1>
<hr>

<div class="container">
    <div class="catalog" id="catalogList">
        <div>首页</div>
        <div>服饰</div>
        <div>手机</div>
        <div>数码</div>
        <div>家电</div>
        <div>生鲜</div>
        <div>零食</div>
        <div>图书</div>
        <div>其它1</div>
        <div>其它2</div>
        <div>其它3</div>
    </div>

    <div class="items_list" id="goodsListContainer">
        <!--
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        -->
    </div>

    <div class="pager">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

    <div class="footer-copyright">
        <hr>
        Copyright <span>&copy;</span> 2017-2023 华清远见
        All Rights Reserved.
        <a href="http://beian.miit.gov.cn/">京ICP备18024677号-1</a>&nbsp;&nbsp; <a
            href="#">作者：西蒙牛</a>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<script src="api/catalog.js"></script>
<script src="api/goods.js"></script>

<script>

    /*
    import catalog from "./api/catalog.js";
    import goods from "./api/goods.js";
    */
    let catalogList = [];
    let currentActiveCatalog = 'all';
    let goodsList = [];

    function initCatalogList() {

        queryAllCatalog().then(resp => {
            if (resp.code === 200) {
                catalogList = resp.data;
                console.log("---------商品板块列出成功-----------")
                console.log(catalogList);
                refreshCatalogList();
                initGoodsList(currentActiveCatalog);
            }
        })
    }

    window.onload = initCatalogList();

    function refreshCatalogList() {
        $("#catalogList").empty();
        let html = '';
        if (currentActiveCatalog === 'all') {
            html += `<div class="active" onclick="initGoodsList('all')">首页</div>`;
        } else {
            html += `<div onclick="initGoodsList('all')">首页</div>`;
        }

        for (let i = 0; i < catalogList.length; i++) {
            let c = catalogList[i];
            if (c.catalog === currentActiveCatalog) {
                html += `<div class="active" onclick="initGoodsList('${c.catalog}')">${c.catalog}</div>`
            } else {
                html += `<div onclick="initGoodsList('${c.catalog}')">${c.catalog}</div>`
            }
        }

        $("#catalogList").append(html);
    }

    function initGoodsList(catalog) {
        currentActiveCatalog = catalog;
        console.log('---------当前选中的分类板块是-----------');
        console.log(currentActiveCatalog);

        refreshCatalogList();
        queryGoodsListByCatalog(currentActiveCatalog).then(resp => {
            if (resp.code === 200) {
                goodsList = resp.data;
                refreshGoodsList(); //刷新商品列表....
            }
        })
    }

    function refreshGoodsList() {
        $("#goodsListContainer").empty();
        let html = '';
        for (let i = 0; i < goodsList.length; i++) {
            let g = goodsList[i];
            html += `<dl class="item">
            <dt><img src="${g.pic}"></dt>
            <dd>${g.name} &nbsp;&nbsp;<span> ${g.price} </span>￥&nbsp;&nbsp;<span>销量：${g.number}</span></dd>
            </dl>`;
        }
        $("#goodsListContainer").append(html);
    }

</script>


</body>
</html>
